<template>
	
     <view class="" style="width: 750upx;">   
	
        <view v-for="item in list" style="width: 750upx;padding-left: 30upx;padding-right: 30upx;padding-top: 20upx;padding-bottom: 20upx;">
            <view v-if="item.sign == 1" >
                <view style="text-align: center;">
                    <text v-if="item.timesum" style="color: #333333;font-size: 30upx;">{{item.time}}</text> 
                </view>
                
                <view style="display: flex;flex-direction: row;justify-content: flex-start;align-items: center;height: 130upx;width: 690upx;">
                    <image :src="avater" mode="aspectFill" style="border-radius: 1000upx;height: 70upx;width: 70upx;"></image>
                    <view style="display: flex;flex-direction: row;margin-left: 20upx;align-items: center;">
                 <text style="width:0;height:0;font-size:0;border:solid 20upx;border-color:#f7f6fc #fca930 #f7f6fc  #f7f6fc;margin-left: 5upx;margin-right: -5upx;"></text>
                    <text style="padding-left: 30upx;padding-right: 30upx;background-color: #fca930;border-radius: 20upx;padding-top: 20upx;font-size: 30upx;color: #333333;max-width: 400upx;line-height: 120%;padding-bottom: 20upx;min-width: 100upx;">{{item.message}}</text>
                    </view>
                </view>
            </view>
            <view v-if="item.sign == 0" >
                <div style="text-align: center;">
                   <text v-if="item.timesum" style="color: #333333;font-size: 30upx;">{{item.time}}</text> 
                </div>
                
                <view style="display: flex;flex-direction: row;justify-content: flex-end;align-items: center;height: 130upx;width: 690upx;">   
                  
                    <view style="display: flex;flex-direction: row;margin-right: 20upx;align-items: center;justify-content: flex-start;">
                       <text style="padding-left: 30upx;padding-right: 30upx;background-color: #EFEFEF;border-radius: 20upx;padding-top: 20upx;font-size: 30upx;color: #333333;max-width: 400upx;line-height: 120%;padding-bottom: 20upx;min-width: 100upx;">{{item.message}}</text>
                    <text style="width:0;height:0;font-size:0;border:solid 20upx;border-color:#f7f6fc #f7f6fc #f7f6fc #EFEFEF;margin-left: -5upx;margin-right: 5upx;"></text>   
                    </view>
                  <image :src="useravater" mode="aspectFill" style="border-radius: 1000upx;height: 70upx;width: 70upx;"></image>    
                </view>
            </view>
        </view>
      
    
	    
        <view style="height: 130upx;width: 750upx;" id="scoll"></view>
		   
    <view style="position:fixed; bottom: 0upx;height: 120upx;display: flex;width: 750upx;background-color: #FEFEFE;flex-direction: row;display: flex;">
    
        <view style="width: 550upx;padding-left: 25upx;padding-right: 50upx;margin-top: 20upx;margin-bottom: 30upx;">
          <input adjust-position="false" v-model="message" type="text"  style="padding-left: 30upx;padding-top: 15upx;padding-bottom: 15upx;height: 70upx;background-color: #EFEFEF;border-radius: 40upx;" placeholder="请输入内容~~"> 
          </view>
          <button  @click="send" style="width: 170upx;height: 60upx;margin-top: 20upx;margin-bottom: 30upx;height: 70upx;border-radius: 40upx;font-size: 30upx;background-color: #09BB07;color: white;">发送</button>
          <!-- <chat-input @send-message="getInputMessage" @show="setScrollH" @foc="setScrollH"></chat-input> -->
   
	</view>
    </view>
</template>

<script>
     import utils from '../../components/shoyu-date/utils.filter.js'
     import chatInput from '../../components/yszyun-imchat-emoji/chatinput.vue';
     import messageShow from '../../components/yszyun-imchat-emoji/messageshow.vue';
     
     
	export default {
        components: {
        	chatInput,
        	messageShow
        },
		data() {
			return {
				userId:"",
                list:"",
                avater:"",
                message:"",
                scrolltop:0,
                useravater:"",
                style: {
                	pageHeight: 0,
                	contentViewHeight: 0,
                	footViewHeight: 90,
                	mitemHeight: 0,
                },
                scrollTop: 0,
                userName:""
			}
		},
		methods: {
            getInputMessage: function (message) { //获取子组件的输入数据
            	 console.log(message);
            	
                this.message = message.content;
            	this.send();
            	this.setScrollH();
            },
            scrollToBottom: function () {
            	var that = this;
            	this.scrollTop += 133; 
            	//console.log(this.scrollTop)
            
            },
            setScrollH: function(){
            	var query = uni.createSelectorQuery();
            	let footh = query.select('.foot');
            	//console.log('fh',footh);
            	const res = uni.getSystemInfoSync();
            	this.style.pageHeight = res.windowHeight;
            	this.$nextTick(function(){
            		footh.fields({
            			size: true
            		}, data => {
            			footh = data.height;
            			console.log('fh',data.height);
            			this.style.contentViewHeight = res.windowHeight -footh ; //像素
            		}).exec();	
            		console.log('contentViewHeight',this.style.contentViewHeight);
            	})	
            },
			send(){
                let {message,userId,useravater,userName,avater} = this
                
               if(message == ""){
                   return
               }
                
              uni.$emit('senddata',{msg:message,userId,useravater,userName,avater})  
              

                      
                   let time = utils.timeTodate("Y-m-d H:i:s",Date.now());  
                      
                      
                      let data = {
                         time: time ,
                         originaltime : time,
                         message : message,
                         sign:0
                      }
                      
                      this.time(data);
                      
                      let c = this;
                      
                      let i = this.list.length;
                       
                       let timestamp  = new Date(Date.parse(data.originaltime.replace(/-/g,  "/"))).getTime() ;
     
                      let timestamps  = new Date(Date.parse(c.list[i-1].originaltime.replace(/-/g,  "/"))).getTime() ;
                       
                      var seconds = Math.floor((timestamp - parseInt(timestamps)) / 1000);
                      
                      var minutes = Math.floor(seconds / 60);
                      
                      if(minutes >= 5){
                          data.timesum = true;
                      }
                      
                      this.list.push(data); 
                      
 // const query = uni.createSelectorQuery().in(this);
 //   query.select('#scoll').boundingClientRect(data => {
 //     console.log("得到布局位置信息" + JSON.stringify(data));
 //     console.log("节点离页面顶部的距离为" + data.top);
     
 //     uni.pageScrollTo({
 //     scrollTop: data.top,
 //     duration: 100
 // });     
     
 //   }).exec();
              
            },
            time(item){
                
                console.log(item);
                
             let qieru = item.originaltime.split(" ")[1];
             let qieru1 = item.originaltime.split(" ")[0];
                
                if(qieru[1] == ":"){
                    qieru = "0" + qieru;
                }
                
              item.originaltime = qieru1 + " "  + qieru; 
              
              console.log(item.originaltime);
                
                let timestamp  = new Date(Date.parse(item.originaltime.replace(/-/g,  "/"))).getDate() ;
                   
                    var now = Date.now();
                 var day =  new Date().getDay();
                 
                var fullyear = new Date().getFullYear();
                var dayss = new Date().getDate(); 
                // var daysss = new Date(Date.parse(item.originaltime.replace(/-/g,  "/"))).getDate();
                 let days = parseInt(dayss) - parseInt(timestamp);
                let year = item.originaltime.split(' ')[0].split('-')[0];
                 
       
                    if(day == 0){
                          day = 7;
                      }
                  console.log(days)
                  
                  var time =  item.originaltime.split(' ')[1].slice(0,5);
                   var i = time.length;
                   if(time[i-1] == ":"){
                       time[i-1]=' '
                   }
                        
                  if( dayss == timestamp){
                    item.time = time
                  }
                   else if(days == 1 ){
                      item.time = "昨天" + " "+ time
                  }   
                   else if(days < day && days >= 2){
                       
                       let arr = ["一","二","三","四","五","六","日"];
                
                     item.time = "周" + arr[day - days - 1] + " "+ time; 
                     
                      }
                      
                  else if( year == fullyear){
                    let arr = item.originaltime.split(' ')[0].split('-');
                    item.time = arr[1]+'月'+arr[2]+'日' + " "+ time;
                  }
                  else{
                      let arr = item.originaltime.split(' ')[0].split('-');
                      item.time = arr[0]+'年'+arr[1]+'月'+arr[2]+'日' + " "+ time;
                  }
                  
                   console.log(item);
            }
		},
         onReady: function (e) {
     
     
     
     
    },
    onLoad() {
        
     var value = uni.getStorageSync("userId");
     
      this.useravater = uni.getStorageSync("touxiang");
      
      this.avater = value.avater;
        
        uni.removeStorage({
            key: 'userId',
            success: function (res) {
               
            }
        });  
      this.userId = value.userId;
      
      uni.setNavigationBarTitle({
          title: value.userName
      });
    this.userName = value.userName
     
     for(let i = 0 ; i< value.data.length ; i++){
         
         if(!value.data[i].originaltime){
             continue;
         }
         
      value.data[i].time  =  value.data[i].originaltime ;
      
      this.time(value.data[i]);
      
     }   
      
      // const res = uni.getSystemInfoSync();
      // this.style.pageHeight = res.windowHeight;
      // this.style.contentViewHeight = res.windowHeight - uni.getSystemInfoSync().screenWidth / 750 * (100) ; //像素
    
      
      // if(value.data.weidutiaodu == 0){
          
      //     this.scrolltop = (value.data.length - 1) * 120; 
          
      //     let scrolltop = this.scrolltop;
          
      //      uni.pageScrollTo({
      //     scrollTop: scrolltop,
      //     duration: 300
      // }); 
          
          
          
      // }else{
          
      //    this.scrolltop = (value.data.length - 1) * 120; 
         
      //     let scrolltop = this.scrolltop;
          
      //   uni.pageScrollTo({
      //       scrollTop: scrolltop,
      //       duration: 300
      //   });   
        
      // }
      
      console.log(value.data);
      
      for(let i = 0 ; i< value.data.length ; i++){
          
          if(!value.data[i].originaltime){
              continue;
          }
      
         let timestamp  = new Date(Date.parse(value.data[i].originaltime.replace(/-/g,  "/"))).getTime() ; 
         
         // let j = i+1
         
         // while(j < value.data.length){
             
         //      j++
         //  if(!value.data[j].originaltime){
         //      continue;
         //  } 
             
         // }
         
         // if(j == value.data.length-1){
         //     break;
         // }
         let j = i + 1;
         
         
          if(j == value.data.length){
              
           
             value.data[i].timesum = true ; 
            break;
          }
          
          
          
        if(!value.data[j].originaltime){
            value.data[i].timesum = true ; 
               continue;
          }
           
           
          let timestamps  = new Date(Date.parse(value.data[j].originaltime.replace(/-/g,  "/"))).getTime() ;
          
         var seconds = Math.floor((timestamps - parseInt(timestamp)) / 1000);
         
         var minutes = Math.floor(seconds / 60);
         
         if(minutes >= 5){
             value.data[i].timesum = true;
         }
             
     }
     
     
     
    this.list =  value.data.reverse() ; 
        
        let c = this ;
        
        
        uni.$on('updatedata',function(data){
                
                
             let i = c.list.length;
              
              let timestamp  = new Date(Date.parse(data.originaltime.replace(/-/g,  "/"))).getTime() ;
                  
             let timestamps  = new Date(Date.parse(c.list[i-1].originaltime.replace(/-/g,  "/"))).getTime() ;
              
             var seconds = Math.floor((timestamp - parseInt(timestamps)) / 1000);
             
             var minutes = Math.floor(seconds / 60);
             
             if(minutes >= 5){
                 data.timesum = true;
             }
             
             c.list.push(data); 
                
                
                
            })
    },
     onUnload(){
          uni.$off('senddata',function(data){
               console.log('移除 update 自定义事件');
           })  
     },
     mounted() {
         const query = uni.createSelectorQuery().in(this);
         query.select('#scoll').boundingClientRect(data => {
           console.log("得到布局位置信息" + JSON.stringify(data));
           console.log("节点离页面顶部的距离为" + data.top);
           
           uni.pageScrollTo({
           scrollTop: data.top,
           duration: 300
       });     
           
         }).exec();
     }
	}
</script>

<style>
page{
    background-color: #f7f6fc;
}
.uni-column {
		display: flex;
		flex-direction: column;
	}

	.content {

		display: flex;
		flex: 1;
		/* margin-bottom: 100upx; */
	}
.foot {
		position: fixed;
		width: 100%;
		/* height: 90upx;
		min-height: 90upx; */
		height: auto;
		left: 0upx;
		bottom: 0;
		overflow: hidden;
	}
</style>
